<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full>
			<uni-forms ref="form" :model="form" labelWidth="80px">
				<uni-forms-item label="审核结果" name="check_status">
					<uni-data-checkbox v-model="form['check_status']" :localdata="checkOptions"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="拒绝原由" name="check_reason" required v-if="form.check_status == '3'">
					<uni-easyinput v-model="form.check_reason" type="textarea" autoHeight></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="后续操作" name="nextAction" v-if="form.check_status == '2'">
					<uni-data-checkbox v-model="nextAction" :localdata="nextOptions"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="下一步" name="nextUserId" required
					v-if="form.check_status == '2' && nextAction == '2'">
					<uni-data-select v-model="nextUserId" :localdata="userOptions" multiple></uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="primary" size="mini" @click="submit" v-if="action != 'view'">确认</button>
				<button type="default" size="mini" @click="showHistory">记录</button>
			</view>
			</uni-card>
			<uni-drawer ref="historyDrawer" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="info">
							<text class="info-text">{{form.user_name}} 提交于 {{form.apply_time}}</text>
						</view>
						<view class="close">
							<button @click="closeHistory()"><text class="word-btn-white">关闭</text></button>
						</view>
						<uni-steps :options="historyList" active-color="#007AFF" :active="0" direction="column" />
					</scroll-view>
				</view>
			</uni-drawer>

		
	</view>
</template>

<script>
	import {
		handleTree,
		parseTime,
		getDicts
	} from '@/api/sys.js'
	import {
		apiGet,
		apiPatch,
		apiDs
	} from '@/api/openapi'

	export default {
		data() {
			return {
				flowId: null,
				dataId: null,
				flowModel: null,
				form: {},
				userOptions: [],
				nextAction: '1',
				nextUserId: null,
				checkOptions: [{
					value: "2",
					text: "审批通过"
				}, {
					value: "3",
					text: "审批不通过"
				}],
				nextOptions: [{
					value: "1",
					text: "结束审批"
				}, {
					value: "2",
					text: "继续审批"
				}],
				rules: {
					check_status: {
						rules: [{
							required: true,
							errorMessage: '审核结果不能为空'
						}]
					}
				},
				historyList: []
			}
		},
		onLoad(option) {
			this.flowId = option.id;
			this.flowModel = option.model;
			apiDs('app_user_select').then(response => {
				this.userOptions = response.data;
			});
			this.getTask();
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getTask(){
				this.reset();
				let params = {
					"@table": "asset_flow",
					"id": this.flowId
				};
				apiGet(params).then(response => {
					if(response.data == null){						
						  this.$modal.msgError("未查询到审核任务");
					}else{
						this.form.data_id = response.data.data_id;
						this.dataId = response.data.data_id;
					}					
				});
			},
			getHistory() {
				let params = {
					"@table": "asset_flow",
					"data_id": this.dataId,
					"flow_model": this.flowModel,
					"check_status": "2",
					"@pager": {
						order: "id DESC",
						limit: 1000
					}
				};
				apiGet(params).then(response => {
					response.data.rows.forEach(h => {
						h.title = h.check_user_name;
						h.desc = parseTime(h.check_time, '{y}-{m}-{d} {h}:{i}:{s}') + '审核通过'
					})
					this.historyList = response.data.rows;
				});
			},
			showHistory() {
				this.getHistory()
				this.$refs['historyDrawer'].open();
			},
			closeHistory() {
				this.$refs['historyDrawer'].close();
			},
			reset() {
				this.form = {
					id: this.flowId,
					flow_model: this.flowModel,
					data_id: null,
					check_status: '2',
					check_reason: null
				}
			},
			submit(ref) {
				this.$refs.form.validate().then(res => {
					let data = {
						"asset_flow": [],
						'@tags':['asset_flow']
					};
					this.form['check_time'] = "@now()";
					data['asset_flow'].push(this.form);
					//审批通过后，可选择结束或者继续审批
					if (this.form['check_status'] == '2') {
						//审批结束
						if (this.nextAction == '1') {
							data[this.flowModel] = {
								id: this.dataId,
								check_status: '2'
							}
							data["@tags"].push(this.flowModel);
						} else {
							//继续审批
							if (!this.nextUserId) {
								this.$modal.msgError("请选择下一步审批人");
								return;
							}
							let userName = null;
							for (var j = 0; j < this.userOptions.length; j++) {
								if (this.userOptions[j].value == this.nextUserId) {
									userName = this.userOptions[j].text;
								}
							}
							console.log('next user ' + this.nextUserId + ' as ' + userName)
							data['asset_flow'].push({
								'flow_model': this.flowModel,
								'data_id': this.dataId,
								'check_user_id': this.nextUserId,
								'check_user_name': userName,
								'check_status': '1'
							})
						}
					} else {
						//审批不通过
						data[this.applyData['flow_model']] = {
						  id: this.dataId,
						  check_status: '3'
						}
						data["@tags"].push(this.flowModel);
					}
					apiPatch(data).then(response => {
						this.$modal.msgSuccess("审批成功");
						this.$tab.navigateBack();
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>